<template>
  <div>
    <div class="conditionBox">
      <el-row>
        <div class="secondaryTitle secondaryTitleTheme">奖惩情况</div>
      </el-row>
      <template v-if="rewardAndPunishInfo.length > 0">
        <table
          cellspacing="0"
          cellpadding="0"
          class="detailTable"
          v-for="(item, index) in rewardAndPunishInfo"
          :key="index"
          style="table-layout: fixed"
        >
          <tbody>
            <tr>
              <td class="title">项目名称</td>
              <td class="content">{{ item.projectName || '--' }}</td>
              <td class="title">责任主体社会信用代码</td>
              <td class="content">{{ item.uscc || '--' }}</td>
            </tr>
            <tr>
              <td class="title">监管区域</td>
              <td class="content">{{ item.areaName || '--' }}</td>
              <td class="title">责任主体企业名称</td>
              <td class="content">{{ item.companyName || '--' }}</td>
            </tr>
            <tr>
              <td class="title">行业</td>
              <td class="content">{{ item.industryName }}</td>
              <td class="title">奖惩情况</td>
              <td class="content general" v-if="item.status == 'REWARD'">
                {{ item.statusDesc || '--' }}
              </td>
              <td class="content serious" v-else-if="item.status == 'PUNISH'">
                {{ item.statusDesc || '--' }}
              </td>
            </tr>
            <tr>
              <td class="title">企业负责人姓名</td>
              <td class="content">{{ item.transactor || '--' }}</td>
              <td class="title">企业负责人联系方式</td>
              <td class="content">{{ item.transactorTel || '--' }}</td>
            </tr>
            <tr>
              <td class="title">奖惩时间</td>
              <td class="content">{{ item.startDate || '--' }}</td>
              <td class="title">奖惩时间截止至</td>
              <td class="content">{{ item.endDate || '--' }}</td>
            </tr>
            <tr>
              <td class="title">奖惩原因</td>
              <td colspan="4">{{ item.reason || '--' }}</td>
            </tr>
            <tr>
              <td class="title">奖惩资料</td>
              <td colspan="4" v-if="item.fileList.length > 0">
                <template v-for="(itemFile, index) in item.fileList">
                  <div class="interval" :key="index">
                    <a
                      target="_blank"
                      class="aLink mouseOn"
                      :href="itemFile.absolutePath"
                      >{{ itemFile.originalName || '--' }}</a
                    >
                  </div>
                </template>
              </td>
              <td colspan="4" v-else>--</td>
            </tr>
          </tbody>
        </table>
      </template>
      <div class="noDeduction" v-else>
        <!-- <img src="../../../static/img/noData.png" alt /> -->
        <img src="../../../static/img/noData.png" alt />
        <div class="text">
          单位暂无工资支付监管中心账户，申请账号审批通过后可使用
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import common from '../../kits/common'

export default {
  name: 'rewardAndPunishCom',
  data() {
    return {}
  },
  props: {
    rewardAndPunishInfo: {
      type: Array,
    },
  },
  created() {},
  methods: {},
}
</script>
<style lang="less" scoped>
.conditionBox {
  // top: 198px;
  background: #fff;
  padding: 24px;
  padding-bottom: 40px;
  color: #333;
  font-size: 14px;
  table {
    width: 100%;
    border-top: 1px solid #d5dfe8;
    border-left: 1px solid #d5dfe8;
    margin-bottom: 20px;
    td {
      height: 42px;
      line-height: 42px;
      padding: 0 18px;
      border-bottom: 1px solid #d5dfe8;
      border-right: 1px solid #d5dfe8;
    }
    .title {
      width: 177px;
      background-color: #f5f7fc;
      font-weight: 500;
      text-align: right;
    }
    .content {
      width: 100%;
    }
    .general {
      color: #6dd400;
    }
    .serious {
      color: #e02020;
    }
    .aLink {
      color: #00a0e9;
    }
  }
}

.secondaryTitle {
  margin-bottom: 24px;
}
.noDeduction {
  text-align: center;
  margin-top: 48px;
  font-size: 16px;
  font-weight: 400;
  img {
    width: 160px;
    margin-bottom: 15px;
  }
  .text {
    color: #3a3a3a;
  }
}
</style>
